<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:200px;
				height: 200px;
				position: absolute;
			}
			#box1{
				background: red;
			}
			#box2{
				background: purple;
				top: 250px;
			}
		</style>
	</head>
	<body>
				<div id="box1"></div>
				<div id="box2"></div>
		<script>
			function Drag(obj){
				this.disX=0;
				this.disY=0;
				this.obj=document.getElementById(obj);
			}
			
			Drag.prototype.init=function(){
				var This = this;
				this.obj.onmousedown = function(e){
					var e = e||event;
					This.fnDown(e);
				
					document.onmousemove = function(e){
						var e = e||event;
						This.fnMove(e);
						return false;
					}
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}
					return false;
				}
			}
			Drag.prototype.fnDown=function(e){
				var e=e||event;
				this.disX = e.clientX-this.obj.offsetLeft;
				this.disY = e.clientY-this.obj.offsetTop;
			}
			Drag.prototype.fnMove=function(e){
				var e = e||event;
				this.obj.style.left=e.clientX-this.disX+'px';
				this.obj.style.top=e.clientY-this.disY+'px';
			}
			function ChildDrag(obj){
				Drag.call(this,obj);
			}
			extent(ChildDrag.prototype,Drag.prototype);
			ChildDrag.prototype.fnMove = function(e){
				var e = e||event;
				var L = e.clientX-this.disX;
				var T = e.clientY-this.disY;
				if (L<0) {
					L=0;
				} else if( L >= document.documentElement.clientWidth-this.obj.offsetWidth){
					L = document.documentElement.clientWidth-this.obj.offsetWidth;
				}
				if (T<0) {
					T=0
				} else if(T >=document.documentElement.clientHeight-this.obj.offsetHeight){
					T= document.documentElement.clientHeight-this.obj.offsetHeight;
				}
				this.obj.style.left = L +"px";
				this.obj.style.top = T +"px";
			}
			
			
			function extent(c,p){
				for (var attr in p) {
					c[attr]=p[attr];
				}
			}
			var p = new Drag('box1');
			var c = new ChildDrag('box2');
			c.init();
			p.init();
		</script>
	</body>
</html>
